<template>
    <div>
        <el-tag closable type="primary" effect="dark"
            style="border-radius: 0px; padding: 12px 10px; cursor: pointer; margin: 3px 0 3px 20px;">
            <span
                style="background-color: white; border-radius: 50%; width: 8px; height: 8px; display: inline-block;"></span>
            <span style="padding-left: 5px;">操作日志</span>
        </el-tag>
    </div>
    <hr>
    <div class="inputs">
        <div class="rinputs">
            <el-row :gutter="10">
                <el-col :span="6.5">
                    <div class="ceshi">
                        <span>操作地址</span>
                        <el-input v-model="input" style="width: 240px" placeholder="请输入操作地址" />
                    </div>
                </el-col>
                <el-col :span="6.5">
                    <div class="ceshi">
                        <span>系统模块</span>
                        <el-input v-model="input" style="width: 240px" placeholder="请输入系统模块" />
                    </div>
                </el-col>
                <el-col :span="6.5">
                    <div class="ceshi">
                        <span>操作人员</span>
                        <el-input v-model="input" style="width: 240px" placeholder="请输入操作人员" />
                    </div>
                </el-col>
            </el-row>

            <br>

            <el-row :gutter="10">
                <el-col :span="6.5">
                    <div class="ceshi">
                        <span class="pl28">类型</span>
                        <el-select v-model="value" placeholder="操作类型" style="width: 240px">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                :value="item.value" style="padding-left: 20px;" />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6.5">
                    <div class="ceshi">
                        <span class="pl28">状态</span>
                        <el-select v-model="value" placeholder="操作类型" style="width: 240px">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                :value="item.value" style="padding-left: 20px;" />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6.5">
                    <div class="ceshi">
                        <span>操作时间</span>

                        <el-date-picker v-model="value1" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 220px;" />
                    </div>
                </el-col>
                <el-col :span="6.5">
                    <el-button type="primary" icon="Search" style="padding: 0 15px; height: 28px;">
                        <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">搜索</span>
                    </el-button>
                    <el-button type="plain" plain icon="Refresh" style="padding: 0 15px; height: 28px;">
                        <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">重置</span>
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div class="bt">
            <el-button type="danger" plain icon="Refresh" style="padding: 0 15px; height: 28px;" disabled>
                <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">重置</span>
            </el-button>
            <el-button type="danger" plain icon="DeleteFilled" style="padding: 0 15px; height: 28px;">
                <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">清空</span>
            </el-button>
            <el-button type="warning" plain icon="Download" style="padding: 0 15px; height: 28px;">
                <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">导出</span>
            </el-button>
        </div>

        <main>
            <table>
                <tr>
                    <th>
                        <el-checkbox v-model="checked1" size="large" />
                    </th>
                    <th>
                        <div>日志编号</div>
                    </th>
                    <th>
                        <div>系统模块</div>
                    </th>
                    <th>
                        <div>操作类型</div>
                    </th>
                    <th>
                        <div style="position: relative;">
                            <span>操作人员</span>
                            <span style="display: flex; flex-direction: column;">
                                <i
                                    style="border: 6px solid transparent; border-bottom-color: gainsboro; width: 0; height: 0;  position: absolute; right: 10px; bottom: 9px;"></i>
                                <i
                                    style="border: 6px solid transparent; border-top-color: gainsboro; width: 0; height: 0; position: absolute; right: 10px; bottom: -4px;"></i>
                            </span>
                        </div>
                    </th>
                    <th>
                        <div>操作地址</div>
                    </th>
                    <th>
                        <div>操作地点</div>
                    </th>
                    <th>
                        <div>操作状态</div>
                    </th>
                    <th>
                        <div>操作日期</div>
                    </th>
                    <th>
                        <div>消耗时间</div>
                    </th>
                    <th>
                        <div>操作</div>
                    </th>
                </tr>
                <tr v-for="item, index in arr1" :key="index">
                    <td>
                        <el-checkbox v-model="checked1" size="large" />
                    </td>
                    <td>{{ item.id1 }}</td>
                    <td>{{ item.model }}</td>
                    <td>
                        <el-button type="warning" plain style="padding: 0 15px; height: 28px;">
                            <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">生成代码</span>
                        </el-button>
                    </td>
                    <td>{{ item.user }}</td>
                    <td>{{ item.host }}</td>
                    <td>{{ item.location }}</td>
                    <td>
                        <el-button type="primary" plain style="padding: 0 15px; height: 28px;">
                            <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">成功</span>
                        </el-button>
                    </td>
                    <td>{{ item.date }}</td>
                    <td>{{ item.consumeTime }}</td>
                    <td class="tefeng">
                        <div @click="dialogTableVisible = true">
                            <el-icon size="small" style="vertical-align: middle; color: #3EA2FF;">
                                <Pointer />
                            </el-icon>
                            <span>详细</span>
                        </div>
                    </td>
                </tr>
            </table>

            <el-dialog v-model="dialogTableVisible" title="操作日志详细" width="800px">
                <div class="loginMain">
                    <div>
                        <p>
                            <span>操作模块:</span>
                            <span>代码生成/生成代码</span>
                        </p>
                        <p>
                            <span>请求地址:</span>
                            <span>/tool/gen/batchGenCode
                            </span>
                        </p>
                    </div>

                    <div>
                        <p>
                            <span>登录信息:</span>
                            <span>admin / 183.226.119.132/重庆市重庆市 </span>
                        </p>
                        <p>
                            <span>请求方式:</span>
                            <span>GET</span>
                        </p>
                    </div>

                    <div>
                        <p>
                            <span>操作方法:</span>
                            <span>com.ruoyi.project.tool.gen.controller.GenController.batchGenCode()</span>
                        </p>
                    </div>

                    <div>
                        <p>
                            <span>请求参数:</span>
                            <span>{"tables":"sys_oper_log"}
                            </span>
                        </p>
                    </div>

                    <div>
                        <p>
                            <span>返回参数:</span>
                        </p>
                    </div>

                    <div>
                        <p>
                            <span>操作状态:</span>
                            <span>正常</span>
                        </p>
                        <p>
                            <span>消耗时间:</span>
                            <span>17毫秒</span>
                        </p>
                        <p>
                            <span>操作时间:</span>
                            <span>2024-12-2717:41:45
                            </span>
                        </p>
                    </div>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false" style="padding: 10px 20px;">关闭</el-button>
                    </div>
                </template>
            </el-dialog>

        </main>

        <footer>
            <div class="f-container">
                <el-pagination background layout="total ,sizes ,prev, pager, next , jumper" :total="arr.length"
                    v-model:page-size="pageSize2" :page-sizes="[3, 4, 10, 15]" v-model:current-page="currentPage2"
                    @current-change="cc" @next-click="nc" @prev-click="pk" @size-change="sc" />
            </div>
        </footer>
    </div>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';

const options1 = [
    {value: '新增', label: '新增'},
    {value: '修改', label: '修改'},
    {value: '删除', label: '删除'},
    {value: '授权', label: '授权'},
]

const options2 = [
    {value: '成功', label: '成功'},
    {value: '失败', label: '失败'}
]


let arr = ref([
    {
        id1: 2113,
        model: '代码模块',
        user: 'admin',
        host: '103.102.203.205',
        location: '北京市',
        date: '2025-01-14',
        consumeTime: '17毫秒',
    },{
        id1: 2123,
        model: '代码模块',
        user: 'admin',
        host: '103.102.203.205',
        location: '北京市',
        date: '2025-01-14',
        consumeTime: '17毫秒',
    },{
        id1: 2103,
        model: '代码模块',
        user: 'admin',
        host: '103.102.203.205',
        location: '北京市',
        date: '2025-01-14',
        consumeTime: '17毫秒',
    },{
        id1: 2013,
        model: '代码模块',
        user: 'admin',
        host: '103.102.203.205',
        location: '北京市',
        date: '2025-01-14',
        consumeTime: '17毫秒',
    },{
        id1: 2213,
        model: '代码模块',
        user: 'admin',
        host: '103.102.203.205',
        location: '北京市',
        date: '2025-01-14',
        consumeTime: '17毫秒',
    },
])

const pageSize2 = ref(3);
const currentPage2=ref(1);
let arr1 = ref([]);

for(let i = 0; i< pageSize2.value; i++){
        arr1.value.push(arr.value[i]);
    }

let n = ref(0);
/* let nc = ()=>{
    arr1.value = [];
    n.value = pageSize2.value*(currentPage2.value-1);
    for(let i = n.value; i< n.value+pageSize2.value; i++){
        if(i == arr.value.length){
            return;
        }
        arr1.value.push(arr.value[i]);
        console.log(666);
    }
    
} */

const sc = ()=>{
    console.log(pageSize2.value);
    arr1.value = [];
    for(let i = n.value; i< n.value+pageSize2.value; i++){
        if(i == arr.value.length){
            return;
        }
        arr1.value.push(arr.value[i]);
        console.log(666);
    }
}

/* const pk = ()=>{
    arr1.value = [];
    n.value = pageSize2.value*(currentPage2.value-1);
    for(let i = n.value; i< n.value+pageSize2.value; i++){
        arr1.value.push(arr.value[i]);
    }
} */

const cc = ()=>{
    
    arr1.value = [];
    //此处赋值
    n.value = pageSize2.value*(currentPage2.value-1);
    for(let i = n.value; i< n.value+pageSize2.value; i++){
        if(i == arr.value.length){
            return;
        }
        arr1.value.push(arr.value[i]);
        console.log(666);
    }
   console.log(currentPage2.value);
}

const onDel = (name,index)=>{
    ElMessageBox.confirm(
    '是否确认强退名称为'+'"'+name+'"'+'的用户?',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      console.log(666);
      //删除后后面的上去
      arr.value.splice(index + n.value, 1);
      arr1.value = [];
      if (arr.value.length == n.value) {
        if(arr.value.length == 0){
            return;
        }else{
            arr1.value = [];
            n.value -= pageSize2.value;
            for (let i = n.value; i < n.value + pageSize2.value; i++) {
                arr1.value.push(arr.value[i]);
            }
        }
      }else{  
          for (let i = n.value; i < n.value + pageSize2.value; i++) {
              if (i == arr.value.length) {
                  
                  return;
              }
              arr1.value.push(arr.value[i]);
              console.log(666);
          }
      }

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const dialogTableVisible = ref(false);
</script>

<style scoped>
*{margin: 0; padding: 0;}

.pl28{padding-left: 28px;}

.inputs{padding: 20px;}
.inputs span{font-weight: bold; padding-right: 10px;}
.rinputs span{font-size: 14px;}
.ceshi span{color: rgb(95, 95, 95);}
.bt{padding: 20px 5px;}

table{border-collapse: collapse;}
table tr{border-bottom: 1px solid black; text-align: center; border-color: rgb(218, 218, 218)}
table tr:hover{background-color: rgb(235, 235, 235);}
table tr th{padding: 10px 0; width: 116px; color: #555E71; font-size: 13px;}
table tr th:first-child{width: 50px;}
table tr th:nth-child(9){width: 180px;}

tr td{color: #828487; font-size: 14px; padding: 10px 0;}
tr td div{display: inline-block; cursor: pointer;}
tr td:last-child{font-size: 12px; color: #3EA2FF;}
.tefeng div span{font-weight: normal;}

footer{position: relative; height: 32px; margin-top: 20px;}
.f-container{display: inline-block; position: absolute; right: 0px;}

.loginMain{padding: 30px 20px 10px 20px;}
.loginMain span:nth-child(2){font-weight: normal;}
.loginMain div{display: flex; justify-content: space-between;}
.loginMain div p{padding-bottom: 30px;}
</style>